<template>
  <div :class="wrpCls">
    <span class="document" @click="toDocument">帮助文档</span>
    <span>
      <a-badge :count="messageNum">
        <img class="message" @click="clickMessage" src="../../assets/message.png" alt="消息" />
      </a-badge>
    </span>
    <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" @logout="logout" />
    <div class="role-container">
      <span class="role-tag">{{ roleTag }}</span>
      <div class="arrow"></div>
    </div>
    <!-- <select-lang :class="prefixCls" /> -->
  </div>
</template>

<script>
// import { ACCESS_TOKEN } from '@/store/mutation-types'
import AvatarDropdown from './AvatarDropdown'
import SelectLang from '@/components/SelectLang'
// import { getUnread } from '@/api/system/message'
export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    SelectLang
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      showMenu: true,
      currentUser: {},
      messageNum: 0,
      isAdmin: 0
      // time: null
    }
  },
  computed: {
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${this.isMobile || !this.topMenu ? 'light' : this.theme}`]: true
      }
    },
    roleTag () {
      // console.log(this.$store.getters.roles, 'roles')
      const hasName = this.$store.getters.roles[0]?.name
      if (hasName) {
        return hasName
      } else {
        return ''
      }
    }
  },
  mounted () {
    if (this.$store.getters.userInfo) {
      this.isAdmin = this.$store.getters.userInfo.isAdmin
    }
    setTimeout(() => {
      this.currentUser = {
        name: this.$store.getters.nickname,
        headimg: this.$store.getters.avatar
      }
    }, 1500)
    // 每隔20s轮询
    // if (this.time == null) {
    //   // 预先执行一次
    //   if (localStorage.getItem(ACCESS_TOKEN)) {
    //     getUnread().then(res => {
    //       this.messageNum = res
    //     })
    //   }
    //   this.time = setInterval(() => {
    //     if (localStorage.getItem(ACCESS_TOKEN)) {
    //       getUnread().then(res => {
    //         this.messageNum = res
    //       })
    //     } else {
    //       this.logout()
    //     }
    //   }, 20 * 1000)
    // }
    // 开启 轮训监听未读数量
    this.$globalVue.$emit('unReadMsgListener')
    // 监听返回未读数量
    this.$globalVue.$on('unReadMsgCount', this.updateUnReadMsgCount)
    // 头像同步更新
    this.$globalVue.$on('headUpdate', this.updateImageUrl)
  },
  destroyed () {
    this.$globalVue.$off('headUpdate')
    this.$globalVue.$off('unReadMsgCount')
  },
  methods: {
    toDocument () {
      if (this.isAdmin === 1) {
        window.open('https://ibxypey62l.feishu.cn/docs/doccn3fRbnK6UNYpOmzv0xR7whb', '_blank')
      } else {
        window.open('https://ibxypey62l.feishu.cn/docs/doccn2VfCCSmCNmVyfS91PZ0pJh', '_blank')
      }
    },
    updateUnReadMsgCount (count) {
      this.messageNum = count
    },
    clickMessage () {
      this.$router.push({
        name: 'message'
      })
    },
    logout () {
      // if (this.time) {
      //   clearTimeout(this.time)
      //   this.time = null
      // }
    },
    // 头像更新
    updateImageUrl () {
      this.currentUser.name = this.$store.getters.nickname
      this.currentUser.headimg = this.$store.getters.avatar
      console.log(this.$store.getters.avatar)
    }
  }
}
</script>
<style>
.message {
  position: relative;
  right: -2px;
  bottom: 1px;
  width: 20px;
  height: 25px;
  cursor: pointer;
}
.document{
  margin-right: 15px;
  cursor: pointer;
}
.role-container {
  position: relative;
  display: inline-block;
}
.arrow {
  position: absolute;
  left: -12px;
  top: 43%;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right-color: #F88A16;
}
.role-tag {
  padding: 5px;
  border-radius: 3px;
  background-color: #F88A16;
}
.role-tag:empty + .arrow {
  display: none;
}
.role-tag:empty {
  display: none;
}
</style>
